<template>
  <view class="content">
    <uni-nav-bar title="uni-ui示例" fixed placeholder></uni-nav-bar>

    <view class="container">
      <uni-section title="按钮组件" type="line">
        <view class="button-group">
          <button type="primary" class="btn">主要按钮</button>
          <button type="success" class="btn">成功按钮</button>
          <button type="warn" class="btn">警告按钮</button>
          <button type="default" class="btn">默认按钮</button>
        </view>
      </uni-section>

      <uni-section title="输入框组件" type="line">
        <view class="input-group">
          <input v-model="inputValue" placeholder="请输入内容" class="input" />
          <button type="primary" size="mini" @click="showInputValue">获取输入值</button>
        </view>
      </uni-section>

      <uni-section title="选择器组件" type="line">
        <view class="picker-group">
          <picker mode="selector" :range="selector" @change="onSelectorChange">
            <view class="picker-input">
              <text>{{ selector[selectorIndex] || '请选择' }}</text>
              <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
            </view>
          </picker>
        </view>
      </uni-section>

      <uni-section title="提示框组件" type="line">
        <view class="toast-group">
          <button type="primary" size="mini" @click="showToast">显示Toast</button>
          <button type="primary" size="mini" @click="showModal">显示模态框</button>
        </view>
      </uni-section>

      <uni-section title="列表组件" type="line">
        <uni-list>
          <uni-list-item title="列表项1" note="列表项描述信息" clickable @click="onItemClick(1)" />
          <uni-list-item title="列表项2" note="列表项描述信息" clickable @click="onItemClick(2)" />
          <uni-list-item title="列表项3" note="列表项描述信息" clickable @click="onItemClick(3)" showArrow />
        </uni-list>
      </uni-section>
    </view>

    <!-- 引入自定义tabBar -->
    <CustomTabBar />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
// 正确导入uni-ui组件
import uniNavBar from '@dcloudio/uni-ui/lib/uni-nav-bar/uni-nav-bar.vue'
import uniSection from '@dcloudio/uni-ui/lib/uni-section/uni-section.vue'
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
import uniList from '@dcloudio/uni-ui/lib/uni-list/uni-list.vue'
import uniListItem from '@dcloudio/uni-ui/lib/uni-list-item/uni-list-item.vue'

// 页面显示时通知tabBar更新选中状态
onShow(() => {
  uni.$emit('updateTabBar', 'views/ui/uniui-demo')
})

// 响应式数据
const inputValue = ref('')
const selector = ref(['选项1', '选项2', '选项3', '选项4'])
const selectorIndex = ref(0)

// 方法
const showInputValue = () => {
  uni.showToast({
    title: `输入值: ${inputValue.value}`,
    icon: 'none'
  })
}

const onSelectorChange = (e) => {
  selectorIndex.value = e.detail.value
}

const showToast = () => {
  uni.showToast({
    title: '这是一条Toast消息',
    icon: 'none'
  })
}

const showModal = () => {
  uni.showModal({
    title: '提示',
    content: '这是一个模态框示例',
    showCancel: true,
    confirmText: '确定',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '您点击了确定',
          icon: 'success'
        })
      } else if (res.cancel) {
        uni.showToast({
          title: '您点击了取消',
          icon: 'none'
        })
      }
    }
  })
}

const onItemClick = (index) => {
  uni.showToast({
    title: `点击了列表项${index}`,
    icon: 'none'
  })
}
</script>

<style scoped>
.content {
  padding: 20rpx;
  padding-bottom: 120rpx;
  /* 为tabBar留出空间 */
}

.container {
  padding-top: var(--status-bar-height);
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.btn {
  margin: 0;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.input {
  flex: 1;
  border: 1rpx solid #ddd;
  padding: 20rpx;
  border-radius: 10rpx;
}

.picker-group {
  padding: 20rpx 0;
}

.picker-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
}

.toast-group {
  display: flex;
  gap: 20rpx;
}
</style>